<template>
	<view>
		<!-- 邀请和搜索 -->
		<view class="top-bar">
			<view class="yaoqing">
				<i class="iconfont icon-tupian"></i>
				<text>邀好友</text>
			</view>
			<view class="search">
				<input type="text" placeholder="搜索您想要的主播/内容/商品">
				<i class="iconfont icon-sousuo"></i>
			</view>
		</view>
		<!-- 邀请和搜索 end -->
		
		<view class="line"></view>
		
		<!-- 关注邀请tag -->
		<view class="tags">
			<view class="tag" @click="activeTag = 1" :class="{active:activeTag == 1}">
				我的关注
			</view>
			<view class="tag" @click="activeTag = 2" :class="{active:activeTag == 2}">
				我的邀请
			</view>
		</view>
		<!-- 关注邀请tag end-->
		
		
		<view class="content">
			<view style="width: 100%; height: 18rpx;"></view>
			<!-- 轮播 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :circular="true">
				<swiper-item v-for="item in imageList">
					<view class="swiper-item"><image :src="item" style="height: 250rpx;width: 685rpx; "></image></view>
				</swiper-item>
			</swiper>
			<!-- 轮播 end-->
			<view style="width: 100%; height: 18rpx;"></view>
			<!-- 通知 -->
			<view class="notice">
				<i class="iconfont icon-xinbaniconshangchuan-"></i>
				<view>您关注的主播001正在直播中！！<text>3千</text>人观看中</view>
				<view>查看</view>
			</view>
			<!-- 通知 end-->
			<view style="width: 100%; height: 18rpx;"></view>
			<!-- 关注 -->
			<view class="gz">
				<img src="https://img.bosszhipin.com/beijin/mcs/useravatar/20190617/378d5c07981a2363363445a77310d720ca90d5e583ca06264a8be17c674900ea_s.png?x-oss-process=image/resize,w_100,limit_0" alt="">
				<view class="gz-con">
					<view>明星狐直播</view>
					<view>专注明星狐直播公众号，主播动态随时了解</view>
				</view>
				<view class="guanzhu">关注</view>
			</view>
			<!-- 关注 end-->
			<view style="width: 100%; height: 18rpx;"></view>
			<!-- 分类 -->
			<view class="categories">
				<view class="category">
					<text>星狐价值观></text>
					<i class="iconfont icon-xingxing1"></i>
				</view>
				<view class="category">
					<text>星狐用户规范></text>
					<i class="iconfont icon-ljie"></i>
				</view>
				<view class="category">
					<text>新人上手指南></text>
					<i class="iconfont icon-shu"></i>
				</view>
			</view>
			<!-- 分类 end -->
			<view style="width: 100%; height: 18rpx;"></view>
			<!-- 直播列表 -->
			<view class="lives">
				<view class="live" v-for="item in videoList">
					<img :src="item.image" alt="">
					<view class="detail">
						<view class="status" v-if="item.status==1" style="background-color: #80adff;">预告</view>
						<view class="status" v-if="item.status==2" style="background-color: #da2e43;">直播中</view>
						<view class="detail-text">{{item.detail}}</view>
					</view>
					<view class="info">
						<img :src="item.avatar" alt="">
						<view>
							<view class="name">{{item.name}}</view>
							<view class="follow" v-if="item.follow">已关注</view>
							<view class="follow" v-else>关注</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 直播列表 end -->
			<view style="width: 100%; height: 18rpx;"></view>
			
			<!-- 底部 -->
			<view class="footer">
				<view class="main-tag" :class="{active:activeMainTag == 1}" @click="activeMainTag=1">
					<i class="iconfont icon-bangzhuzhichi_yunzhibo"></i>
					<text>首页</text>
				</view>
				<view class="main-tag" :class="{active:activeMainTag == 2}" @click="activeMainTag=2">
					<i class="iconfont icon-xingxing"></i>
					<text>广场</text>
				</view>
				<view class="main-tag" :class="{active:activeMainTag == 3}" @click="activeMainTag=3">
					<i class="iconfont icon-huiyuan"></i>
					<text>会员</text>
				</view>
				<view class="main-tag" :class="{active:activeMainTag == 4}" @click="activeMainTag=4">
					<i class="iconfont icon-gonglve"></i>
					<text>攻略</text>
				</view>
				<view class="main-tag" :class="{active:activeMainTag == 5}" @click="activeMainTag=5">
					<i class="iconfont icon-wode"></i>
					<text>我的</text>
				</view>
			</view>
			
			<!-- 底部 end -->
			<view style="width: 100%; height: 90rpx;"></view>
			
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTag:1,
				imageList:[
					"https://img.alicdn.com/simba/img/TB1TmTPBrr1gK0jSZFDSuv9yVXa.jpg",
					"https://img.alicdn.com/tfs/TB1MDHfBhD1gK0jSZFyXXciOVXa-520-280.jpg_q90_.webp",
					"https://img.alicdn.com/simba/img/TB1SfSCAQY2gK0jSZFgSuw5OFXa.jpg"
				],
				videoList:[
					{
						image:"https://img2.woyaogexing.com/2020/04/13/6f553a6aea554b4fb95b6ad9a9d1bf81!400x400.jpeg",
						status:1, // 1 预告 2 直播中
						detail:"今天晚上18:00准时开始直播",
						name:"红狐集团",
						follow:true,
						avatar:"https://img2.woyaogexing.com/2020/04/13/6f553a6aea554b4fb95b6ad9a9d1bf81!400x400.jpeg"
					},
					{
						image:"https://img2.woyaogexing.com/2020/04/13/49db0d8d16a846ee841a546fe9ed1574!400x400.jpeg",
						status:2, // 1 预告 2 直播中
						detail:"今晚18:00准时直播",
						name:"红狐集团",
						follow:false,
						avatar:"https://img2.woyaogexing.com/2020/04/13/49db0d8d16a846ee841a546fe9ed1574!400x400.jpeg"
					},
					{
						image:"https://img2.woyaogexing.com/2020/04/13/6f553a6aea554b4fb95b6ad9a9d1bf81!400x400.jpeg",
						status:1, // 1 预告 2 直播中
						detail:"今晚18:00准时直播",
						name:"红狐集团",
						follow:true,
						avatar:"https://img2.woyaogexing.com/2020/04/13/6f553a6aea554b4fb95b6ad9a9d1bf81!400x400.jpeg"
					},
					{
						image:"https://img2.woyaogexing.com/2020/04/12/26fdc65002f7438589aa8a62ae640ee7!400x400.jpeg",
						status:1, // 1 预告 2 直播中
						detail:"今晚18:00准时直播",
						name:"红狐集团",
						follow:true,
						avatar:"https://img2.woyaogexing.com/2020/04/12/26fdc65002f7438589aa8a62ae640ee7!400x400.jpeg"
					}
				],
				activeMainTag:1,
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	@import url("http://at.alicdn.com/t/font_1750970_ynmi8kc1bm9.css");
	.top-bar{
		height: 95rpx;
		display: flex;
		align-items: center;
	}
	.top-bar .yaoqing{
		display: flex;
		flex-direction: column;
		color: #8c8c8c;
		text-align: center;
		padding: 20rpx 10rpx;
	}
	.top-bar .yaoqing i{
		font-size: 34rpx;
	}
	.top-bar .yaoqing text{
		font-size: 16rpx;
	}
	.top-bar .search{
		width: 640rpx;
		height: 60rpx;
		position: relative;
	}
	.top-bar .search input{
		background-color: #ededed;
		border-radius: 30rpx;
		width: 586rpx;
		height: 60rpx;
		font-size: 25rpx;
		padding-left: 54rpx;
	}
	.top-bar .search input::-webkit-input-placeholder{
		color: #d8d8d8;
		
	}
	.top-bar .search i{
		position: absolute;
		font-size: 28rpx;
		top: 12rpx;
		left: 18rpx;
		color: #ebe0bf;
		font-weight: 600;
	}
	.line{
		height: 2rpx;
		width: 100%;
		background-color: #f1f1f1;
		transform:scaleY(0.5);
	}
	.tags{
		height: 65rpx;
		padding: 0 132rpx;
		font-size: 27rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.tag.active{
		color: #d6b482;
	}
	.tag:after{
		content: '';
		display: block;
		height: 6rpx;
		width: 50rpx;
		border-radius: 3rpx;
		position: relative;
		top: 14rpx;
		margin: 0 auto;
	}
	.tag.active:after{
		background-color: #d6b482;
	}
	
	.content{
		background-color: #f8f8f8;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.swiper{
		height: 250rpx;
		width: 685rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}
	.swiper-item{
		height: 250rpx;
		width: 685rpx;
	}
	.swiper-item img{
		height: 250rpx;
		width: 685rpx;
	}
	.notice{
		height: 48rpx;
		width: 685rpx;
		background-color: white;
		display: flex;
		padding: 0 22px;
		box-sizing: border-box;
		align-items: center;
		border-radius: 10rpx;
	}
	.notice i{
		color: #a77b87;
		font-size: 30rpx;
		margin-right: 10rpx;
	}
	.notice>view:nth-child(2){
		font-size: 20rpx;
		flex-grow:5;
	}
	.notice>view>text{
		color: #F0AD4E;
	}
	.notice>view:nth-child(3){
		font-size: 22rpx;
		width: 64rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		color: #F0AD4E;
		border: 1px solid #F0AD4E;
		border-radius: 10rpx;
	}
	.gz{
		width: 685rpx;
		height: 82rpx;
		background-color: white;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
	}
	.gz img{
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
		margin: 0 20rpx;
	}
	.gz .gz-con{
		display: flex;
		flex-direction: column;
		flex-grow: 5;
	}
	.gz .gz-con view:first-child{
		font-size: 25rpx;
		font-weight: 600;
	}
	.gz .gz-con view:last-child{
		font-size: 18rpx;
		color: #a1a1a1;
	}
	.gz .guanzhu{
		color: green;
		border: 1px solid green;
		border-radius: 5rpx;
		font-size: 20rpx;
		margin-right: 20rpx;
		width: 64rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
	}
	.categories{
		width: 685rpx;
		display: flex;
		justify-content: space-between;
	}
	.categories .category{
		width: 220rpx;
		height: 62rpx;
		background-color: white;
		font-size: 26rpx;
		text-align: center;
		line-height: 62rpx;
		border-radius: 10rpx;
	}
	.categories .category>i{
		font-size: 30rpx;
		color: #D6B482;
	}
	.lives{
		display: flex;
		width: 685rpx;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.live{
		width: 330rpx;
		height: 440rpx;
		border-radius: 20rpx;
		background-color: white;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
	.live img{
		height: 332rpx;
		width: 330rpx;
	}
	.live .detail{
		position: absolute;
		height: 58rpx;
		width: 330rpx;
		top: 275rpx;
		background-color: rgba(0,0,0,0.2);
		display: flex;
		font-size: 18rpx;
		align-items: center;
		color: white;
	}
	.live .detail .status{
		width: 58rpx;
		height: 24rpx;
		color: white;
		text-align: center;
		line-height: 24rpx;
		border-radius: 12rpx;
		margin: 0 12rpx;
	}
	.live .info{
		display: flex;
		align-items: center;
		height: 100rpx;
	}
	.live .info img{
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		margin: 0 20rpx;
	}
	.live .info img+view{
		height: 56rpx;
	}
	.live .info .name{
		font-size: 24rpx;
		font-weight: 600;
	}
	.live .info .follow{
		width: 62rpx;
		height: 24rpx;
		border-radius: 12rpx;
		font-size: 18rpx;
		background-color: #efa44a;
		color: white;
		text-align: center;
		line-height: 24rpx;
	}
	.footer{
		width: 100%;
		height: 90rpx;
		background: #202020;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10;
		color: #6a6a6a;
		justify-content: space-around;
		text-align: center;
	}
	.footer .main-tag{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.footer .main-tag i{
		font-size: 32rpx;
	}
	.footer .main-tag text{
		font-size: 18rpx;
	}
	.footer .main-tag.active{
		color: #e4ddbc;
	}
</style>
